<template>
  <!-- 选择账号 -->
  <div
    class="chooseAccount_styl"
    v-if="modalShow"
  >
    <Modal
      ref="modalEle"
      v-model="modalShow"
      width="500"
      class="modal-styl"
    >
      <p
        slot="header"
        style="text-align: center"
      >
        <span>选择账号</span>
      </p>
      <div class="chooseList">
        <RadioGroup
          v-model="chooseData"
          vertical
        >
          <div
            class="radio_item"
            :class="[chooseData == item.uid ? 'radio_itemCopy' : '']"
            v-for="(item, index) in companyList"
            :key="index"
          >
            <Radio
              :label="item.uid"
              class="radio_styl"
            >
              <span class="title_name">{{ item.name }}</span>
            </Radio>
            <img
              class="img_styl"
              src="@/assets/images/back_chooseAccount.png"
              alt=""
              srcset=""
            >
          </div>
        </RadioGroup>
      </div>
      <div slot="footer">
        <Button
          type="text"
          @click="modalShow = false"
        >取消</Button>
        <Button
          type="primary"
          @click="submitFun"
        >保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>

export default {
  components: {},
  mixins: [],
  props: {
    companyList: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      modalShow: false,
      chooseData: '',
    };
  },
  mounted() {
  },
  methods: {
    openFun() {
      this.chooseData = '';
      this.modalShow = false;
      this.modalShow = true;
    },
    cancelFun() {
      this.modalShow = false;
    },
    submitFun() {
      if (!this.chooseData) {
        this.$Message.error('请选择登录账号!');
        return;
      }
      this.$emit('chooseData', this.chooseData);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

::v-deep .ivu-modal-header {
  background-image: url("~@/assets/images/modal_back500.png") !important;
}
.chooseAccount_styl {
}
.chooseList {
  width: 100%;
  height: 300px;
  overflow: hidden;
  overflow-y: auto;
  .radio_item {
    .flex-x();
    height: 60px;
    width: 468px;
    padding: 0 20px;
    margin-bottom: 20px;
    background-color: #f5f7f9;
    border-radius: 8px;
    .radio_styl {
      width: 100%;
      .title_name {
        width: 300px;
        margin-left: 20px;
      }
    }
  }
  .radio_itemCopy {
    background-color: #daeaf7;
  }
}
</style>
